import { defineComponent, PropType, toRefs } from 'vue';
import { useConnectorCardSettingFetchInterfaceList } from '@src/component/form/components/FormConnector/components/FormConnectorDataRuleSetting/hooks/fetch';
import { ConnectorAppModuleListItem, ConnectorOptionsAction } from '@src/modules/connector';
import { ComponentEmitAction } from '@src/component/form/components/FormConnector/components/FormConnectorDataRuleSetting/model/enum/action';
import { t } from '@src/locales';

export default defineComponent({
  props: {
    value: {
      type: Object as PropType<ConnectorOptionsAction | Record<string, any>>,
      default: ()=> ({})
    },
    fetchParam: {
      type: Object as PropType<Record<string, any>>,
      default: ()=> ({})
    },
    selectFormValue: {
      type: Object as PropType<Record<string, any> | null>,
      default: ()=> ({})
    }
  },
  emits: [ComponentEmitAction.Input],
  setup(props, { emit, expose }) {
    const { value } = toRefs(props)
    const { fetchInterFaceList, interfaceList } = useConnectorCardSettingFetchInterfaceList()

    const refreshFetchData = (params: Record<string, any> = {}) => {
      // 参数为空的时候置空数据
      if(!params?.bizTypeId) {
        return interfaceList.value = []
      }
      // 请求获取对应接口列表
      fetchInterFaceList(params)
        .then(()=> {
          handleSelectChange(interfaceList.value?.[0] || '')
        })
    }

    const handleSelectChange = (v: ConnectorOptionsAction)=> {
      v.selected = true;
      emit(ComponentEmitAction.Input, { field: null, newValue: null, selectItem: v })
    }

    expose({
      refreshFetchData,
    })

    return ()=> (
      <el-select 
        value={value.value} 
        value-key="apiId" 
        placeholder={t('common.connector.fieldSetting.interfacePlaceholder')}
        class="form-connector__interface" 
        onChange={handleSelectChange}
        clearable>
        {
          interfaceList.value.map(item=> {
            return (
              <el-option label={item.name} value={item}></el-option>
            )
          })
        }
      </el-select>
    )
  }
})